<ui:composition template="/WEB-INF/template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:a4j="http://richfaces.org/a4j"
	xmlns:rich="http://richfaces.org/rich">
	<ui:composition template="/templates/menu-template.xhtml">
		<ui:define name="title">
			<h:outputText value="#{msg.catalogoUsuarios}" />
		</ui:define>
		<ui:define name="content">
			<a4j:form id="form">
				<rich:panel>
					<a4j:keepAlive beanName="beanUserPortal" />
					<f:facet name="header">
						<h:outputText value="#{msg.escogerAccion}" />
					</f:facet>
					<h:panelGrid columns="1">
						<a4j:commandButton id="addUserCmdBtn" ajaxSingle="true"
							value="#{msg.agregarUsuario}">
							<rich:componentControl for="mpAgregarUser"
								attachTo="addUserCmdBtn" operation="show" event="onclick" />
						</a4j:commandButton>
					</h:panelGrid>
					<rich:spacer height="20px" />
					<rich:extendedDataTable var="item" id="table" width="100%"
						reRender="datascroller" rows="10"
						value="#{beanUserPortal.listItems}"
						style="margin-left: auto; margin-right: auto;text-align: center;">
						<rich:column id="userColumn" label="#{msg.user}" width="12%">
							<f:facet name="header">
								<h:outputText value="#{msg.user}" />
							</f:facet>
							<h:outputText value="#{item.user}" />
						</rich:column>
						<rich:column id="firstNameColumn" label="#{msg.firstName}"
							width="10%">
							<f:facet name="header">
								<h:outputText value="#{msg.firstName}" />
							</f:facet>
							<h:outputText value="#{item.firstName}" />
						</rich:column>
						<rich:column id="lastnameColumn" label="#{msg.lastname}"
							width="10%">
							<f:facet name="header">
								<h:outputText value="#{msg.lastname}" />
							</f:facet>
							<h:outputText value="#{item.lastName}" />
						</rich:column>
						<rich:column id="emailColumn" label="#{msg.email}" width="20%">
							<f:facet name="header">
								<h:outputText value="#{msg.email}" />
							</f:facet>
							<h:outputText value="#{item.email}" />
						</rich:column>
						<rich:column id="companyColumn" label="#{msg.company}" width="20%">
							<f:facet name="header">
								<h:outputText value="#{msg.company}" />
							</f:facet>
							<h:outputText value="#{item.company}" />
						</rich:column>
						<rich:column id="areaColumn" label="#{msg.area}" width="15%">
							<f:facet name="header">
								<h:outputText value="#{msg.area}" />
							</f:facet>
							<h:outputText value="#{item.area}" />
						</rich:column>
						<rich:column width="15%" id="acciones" label="#{msg.acciones}">
							<f:facet name="header">
								<h:outputText value="#{msg.acciones}" />
							</f:facet>
							<a4j:commandLink ajaxSingle="true" id="editUser">
								<h:graphicImage value="/static/images/edit.png"
									style="border: 0" />
								<f:setPropertyActionListener value="#{item}"
									target="#{beanUserPortal.currentItem}" />
								<rich:componentControl for="mpEditarUser" attachTo="editUser"
									operation="show" event="onclick" />
							</a4j:commandLink>
							<rich:toolTip for="editUser" value="#{msg.editar}" />
							<a4j:commandLink ajaxSingle="true" id="deleteUser">
								<h:graphicImage value="/static/images/delete.png"
									style="border: 0" />
								<f:setPropertyActionListener value="#{item}"
									target="#{beanUserPortal.currentItem}" />
								<rich:componentControl for="mpBorrarUser" attachTo="deleteUser"
									operation="show" event="onclick" />
							</a4j:commandLink>
							<rich:toolTip for="deleteUser" value="#{msg.borrar}" />
						</rich:column>
						<f:facet name="footer">
							<rich:datascroller id="datascroller" renderIfSinglePage="false" />
						</f:facet>
					</rich:extendedDataTable>
					<!-- Inicio Modal Panel Borrar -->
					<rich:modalPanel id="mpBorrarUser" height="110" width="250">
						<f:facet name="header">
							<h:panelGroup>
								<h:outputText value="#{msg.borrar}"></h:outputText>
							</h:panelGroup>
						</f:facet>
						<p>El usuario seleccionado será eliminado permanentemente del
							sistema.</p>
						<h:panelGrid columns="2" style="margin-left: auto;">
							<h:panelGroup>
								<a4j:commandButton id="btnContinueDelete"
									value="#{msg.continuar}" ajaxSingle="true"
									action="#{beanUserPortal.deleteUser}"
									oncomplete="#{rich:component('mpBorrarUser')}.hide();"
									reRender="table" />
							</h:panelGroup>
							<h:panelGroup>
								<a4j:commandButton value="#{msg.cancelar}" id="btnCancelUser"
									onclick="#{rich:component('mpBorrarUser')}.hide();return false;" />
							</h:panelGroup>
						</h:panelGrid>
					</rich:modalPanel>
					<!-- Fin Modal Panel Borrar -->
				</rich:panel>
			</a4j:form>

			<!-- Inicio Modal Panel Agregar -->
			<rich:modalPanel id="mpAgregarUser" autosized="true" width="380">
				<f:facet name="header">
					<h:outputText value="#{msg.agregar}" />
				</f:facet>
				<f:facet name="controls">
					<h:panelGroup>
						<h:graphicImage value="/static/images/close.png" id="hideAddPanel" />
						<rich:componentControl for="mpAgregarUser" attachTo="hideAddPanel"
							operation="hide" event="onclick" />
					</h:panelGroup>
				</f:facet>
				<a4j:form>
					<h:panelGrid columns="1">
						<a4j:outputPanel ajaxRendered="true">
							<rich:graphValidator value="#{beanUserPortal}">
								<h:panelGrid columns="3"
									style="margin-left: auto; margin-right: auto;">
									<h:outputText value="#{msg.user}" />
									<h:inputText value="#{beanUserPortal.newUser}"
										id="newUserPortal" style="width: 150px;" maxlength="20">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newUserPortal" />
									<h:outputText value="#{msg.firstName}" />
									<h:inputText id="newFirstnamePortal"
										value="#{beanUserPortal.newFirstName}" style="width: 150px;"
										maxlength="20">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newFirstnamePortal" />
									<h:outputText value="#{msg.lastname}" />
									<h:inputText id="newLastnamePortal"
										value="#{beanUserPortal.newLastName}" style="width: 150px;"
										maxlength="20">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newLastnamePortal" />
									<h:outputText value="#{msg.email}" />
									<h:inputText id="newEmailPortal"
										value="#{beanUserPortal.newEmail}" style="width: 150px;"
										maxlength="50">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newEmailPortal" />
									<h:outputText value="#{msg.company}" />
									<h:inputText id="newCompanyPortal"
										value="#{beanUserPortal.newCompany}" style="width: 150px;"
										maxlength="50">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newCompanyPortal" />
									<h:outputText value="#{msg.area}" />
									<h:inputText id="newAreaPortal"
										value="#{beanUserPortal.newArea}" style="width: 150px;"
										maxlength="30">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="newAreaPortal" />
									<h:outputText value="#{msg.securityQuestion}" />
									<h:selectOneMenu id="newQuestionPortal"
										value="#{beanUserPortal.newSecurityQuestion}"
										style="width: 150px; margin-left: 2px;">
										<f:selectItem itemLabel="Selecciona......." itemValue="-1" />
										<f:selectItem itemLabel="Nombre de tu primer mascota"
											itemValue="Nombre de tu primer mascota" />
										<f:selectItem itemLabel="Ciudad donde naciste"
											itemValue="Ciudad donde naciste" />
										<f:selectItem itemLabel="Mejor amigo de la infancia"
											itemValue="Mejor amigo de la infancia" />
										<f:selectItem itemLabel="Personaje de ficción favorito"
											itemValue="Personaje de ficción favorito" />
										<f:selectItem itemLabel="Cantante favorito"
											itemValue="Cantante favorito" />
										<f:selectItem itemLabel="Persona que más admiras"
											itemValue="Persona que más admiras" />
									</h:selectOneMenu>
									<rich:message for="newQuestionPortal" />
									<h:outputText value="#{msg.answerQuestion}" />
									<h:inputSecret id="newAnswerPortal"
										value="#{beanUserPortal.newAnswerQuestion}"
										style="width: 150px;" maxlength="40">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="newAnswerPortal" />
									<h:outputText value="#{msg.newPassword}" />
									<h:inputSecret id="newPasswordChangedPortal"
										value="#{beanUserPortal.newPassword}" style=" width: 150px;"
										maxlength="40">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="newPasswordChangedPortal" />
									<h:outputText value="#{msg.repeatNewPassword}" />
									<h:inputSecret id="newRepeatPassword"
										value="#{beanUserPortal.newRepeatPassword}"
										style="width: 150px;" maxlength="40">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="newRepeatPassword" />
									<h:outputText value="#{msg.roleName}" />
									<h:selectOneMenu id="newRol" value="#{beanUserPortal.newRol}"
										style="width: 150px; margin-left: 2px;">
										<f:selectItem itemLabel="Selecciona......." itemValue="-1" />
										<f:selectItem itemValue="1"
											itemLabel="Administrador de reportes estadísticos" />
										<f:selectItem itemValue="2"
											itemLabel="Administrador de configuración comercial" />
										<rich:ajaxValidator event="onblur" />
									</h:selectOneMenu>
									<rich:message for="newRol" />
								</h:panelGrid>
							</rich:graphValidator>
						</a4j:outputPanel>
						<h:panelGrid columns="2">
							<a4j:commandButton value="#{msg.continuar}"
								id="continueAddPortalUser" action="#{beanUserPortal.createUser}"
								oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('mpAgregarUser')}.hide();"
								onclick="this.disabled=true" reRender="table" />
							<a4j:commandButton value="#{msg.cancelar}"
								id="cancelAddPortalUser"
								onclick="#{rich:component('mpAgregarUser')}.hide();return false;" />
						</h:panelGrid>
					</h:panelGrid>
				</a4j:form>
			</rich:modalPanel>
			<!-- Fin Modal Panel Agregar -->
			<!-- Inicio Modal Panel Editar -->
			<rich:modalPanel id="mpEditarUser" autosized="true" width="380">
				<f:facet name="header">
					<h:outputText value="#{msg.editar}" />
				</f:facet>
				<f:facet name="controls">
					<h:panelGroup>
						<h:graphicImage value="/static/images/close.png" id="hidelink" />
						<rich:componentControl for="mpEditarUser" attachTo="hidelink"
							operation="hide" event="onclick" />
					</h:panelGroup>
				</f:facet>
				<a4j:form>
					<a4j:outputPanel ajaxRendered="true">
						<h:panelGrid columns="1">
							<rich:graphValidator value="#{beanUserPortal}">
								<h:panelGrid columns="3"
									style="margin-left: auto; margin-right: auto;">
									<h:outputText value="#{msg.user}" />
									<h:outputText id="userPortal" value="#{beanUserPortal.user}" />
									<h:outputText value="" />
									<h:outputText value="#{msg.firstName}" />
									<h:inputText id="firstnamePortal"
										value="#{beanUserPortal.firstName}" style="width: 150px;"
										maxlength="20">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="firstnamePortal" />
									<h:outputText value="#{msg.lastname}" />
									<h:inputText id="lastnamePortal"
										value="#{beanUserPortal.lastName}" style="width: 150px;"
										maxlength="20">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="lastnamePortal" />
									<h:outputText value="#{msg.email}" />
									<h:inputText id="emailPortal" value="#{beanUserPortal.email}"
										style="width: 150px;" maxlength="50">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="emailPortal" />
									<h:outputText value="#{msg.company}" />
									<h:inputText id="companyPortal"
										value="#{beanUserPortal.company}" style="width: 150px;"
										maxlength="50">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="companyPortal" />
									<h:outputText value="#{msg.area}" />
									<h:inputText id="areaPortal" value="#{beanUserPortal.area}"
										style="width: 150px;" maxlength="30">
										<rich:ajaxValidator event="onblur" />
									</h:inputText>
									<rich:message for="areaPortal" />
									<h:outputText value="#{msg.active}" />
									<h:selectOneMenu id="activePortal"
										value="#{beanUserPortal.isActive}"
										style="width: 150px; margin-left: 2px;" maxlength="1">
										<f:selectItem itemLabel="Estado......." itemValue="-1" />
										<f:selectItem itemLabel="Activo" itemValue="1" />
										<f:selectItem itemLabel="Inactivo" itemValue="0" />
									</h:selectOneMenu>
									<rich:message for="activePortal" />
									<h:outputText value="#{msg.securityQuestion}" />
									<h:selectOneMenu id="questionPortal"
										value="#{beanUserPortal.securityQuestion}"
										style="width: 150px; margin-left: 2px;" maxlength="30">
										<f:selectItem itemLabel="Selecciona......." itemValue="-1" />
										<f:selectItem itemLabel="Nombre de tu primer mascota"
											itemValue="Nombre de tu primer mascota" />
										<f:selectItem itemLabel="Ciudad donde naciste"
											itemValue="Ciudad donde naciste" />
										<f:selectItem itemLabel="Mejor amigo de la infancia"
											itemValue="Mejor amigo de la infancia" />
										<f:selectItem itemLabel="Personaje de ficción favorito"
											itemValue="Personaje de ficción favorito" />
										<f:selectItem itemLabel="Cantante favorito"
											itemValue="Cantante favorito" />
										<f:selectItem itemLabel="Persona que más admiras"
											itemValue="Persona que más admiras" />
									</h:selectOneMenu>
									<rich:message for="questionPortal" />
									<h:outputText value="#{msg.answerQuestion}" />
									<h:inputSecret id="answerPortal"
										value="#{beanUserPortal.answerQuestion}" style="width: 150px;"
										maxlength="30">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="answerPortal" />
									<h:outputText value="#{msg.password}" />
									<h:inputSecret id="passwordPortal"
										value="#{beanUserPortal.password}" style="width: 150px;"
										maxlength="20">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="passwordPortal" />
									<h:outputText value="#{msg.newPassword}" />
									<h:inputSecret id="passwordChangedPortal"
										value="#{beanUserPortal.passwordChanged}"
										style="width: 150px;" maxlength="20">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="passwordChangedPortal" />
									<h:outputText value="#{msg.repeatNewPassword}" />
									<h:inputSecret id="repeatPassword"
										value="#{beanUserPortal.repeatPassword}" style="width: 150px;"
										maxlength="20">
										<rich:ajaxValidator event="onblur" />
									</h:inputSecret>
									<rich:message for="repeatPassword" />
									<h:outputText value="#{msg.roleName}" />
									<h:selectOneMenu id="rolPortal" value="#{beanUserPortal.rol}"
										style="width: 150px; margin-left: 2px;">
										<f:selectItem itemLabel="Selecciona......." itemValue="-1" />
										<f:selectItem itemValue="1"
											itemLabel="Administrador de reportes estadísticos" />
										<f:selectItem itemValue="2"
											itemLabel="Administrador de configuración comercial" />
									</h:selectOneMenu>
									<rich:message for="rolPortal" />
								</h:panelGrid>
							</rich:graphValidator>
							<h:panelGrid columns="2">
								<a4j:commandButton value="#{msg.continuar}"
									id="continueEditUser" action="#{beanUserPortal.updateUser}"
									ajaxSingle="true" onclick="this.disabled=true" reRender="table"
									oncomplete="if (#{facesContext.maximumSeverity==null}) #{rich:component('mpEditarUser')}.hide();" />
								<a4j:commandButton value="#{msg.cancelar}" id="cancelEditUser"
									onclick="#{rich:component('mpEditarUser')}.hide();return false;" />
							</h:panelGrid>
						</h:panelGrid>
					</a4j:outputPanel>
				</a4j:form>
			</rich:modalPanel>
			<!-- Fin Modal Panel Editar -->
		</ui:define>
	</ui:composition>
</ui:composition>
